<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>新增影片</title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body>
		<form class="layui-form" action="">
			<div class="mainBox">
				<div class="main-container">
					<div class="layui-form-item">
						<label class="layui-form-label">影片名称</label>
						<div class="layui-input-block">
							<input type="text" name="mname" value="测试电影1" lay-verify="title" autocomplete="off" placeholder="请输入影片名"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">导演</label>
						<div class="layui-input-block">
							<input type="text" name="mdirector" value="测试导演1" lay-verify="title" autocomplete="off" placeholder="请输入导演"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">主演</label>
						<div class="layui-input-block">
							<input type="text" name="mactor" value="测试主演1" lay-verify="title" autocomplete="off" placeholder="请输入主演"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">类型</label>
						<div class="layui-input-block">
							<input type="text" name="mtype" value="测试类型1" lay-verify="title" autocomplete="off" placeholder="请输入类型"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">上映日期</label>
						<div class="layui-input-block">
							<input type="date" id="mdate" name="mdate"  lay-verify="title" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">评分</label>
						<div class="layui-input-block">
							<input type="text" name="mscore" value="8.6" lay-verify="title" autocomplete="off" placeholder="请输入评分"
								class="layui-input">
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">封面</label>
						<div class="layui-input-block">
							<input type="file" name="mpage"  lay-verify="title" autocomplete="off" placeholder="请输入评分"
								class="layui-input">
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">简介</label>
						<div class="layui-input-block">
							<textarea name="msummary"  lay-verify="title" autocomplete="off" placeholder="请输入简介"
								class="layui-input"></textarea>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
						lay-filter="movie-save">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'jquery'], function() {
				let form = layui.form;
				let $ = layui.jquery;

				//表单提交
				form.on('submit(movie-save)', function(data) {
					console.log(JSON.stringify(data.field));
					//{"mname":"测试电影1","mdirector":"测试导演1","mactor":"测试主演1","mtype":"测试类型1","mdate":"2023-07-06","mscore":"8.6","mpage":"","msummary":""}
					//$.ajax =>异步
					$.ajax({
						url: '/0625jdbcdemo2/MovieServlet?op=add',
						data: JSON.stringify(data.field),
						dataType: 'json',
						contentType: 'application/json',
						type: 'post',
						success: function(result) {
							if (result.msg == "success") {
								layer.msg("添加成功", {
									icon: 1,
									time: 1000
								}, function() {
									parent.layer.close(parent.layer.getFrameIndex(window
										.name)); //关闭当前页
									parent.layui.table.reload("movie-table");
								});
							} else {
								layer.msg("添加失败", {
									icon: 2,
									time: 1000
								});
							}
						}
					})
					return false;
				});
			})
		</script>
		<script>
		//這段代碼給mdate賦值為當前日期
		Date.prototype.toDateInputValue = (function() {
		    var local = new Date(this);
		    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
		    return local.toJSON().slice(0,10);
		});

		document.getElementById("mdate").value=new Date().toDateInputValue();
		</script>
	
	

	
	</body>
	
</html>
